<!--  -->
<template>
  <div class="mycourse-page">
    <div class="mycourse-wrap" v-if="+courseNum !== 0">
      <div class="timeline-wrap w1200">
        <a-timeline>
          <a-timeline-item>
            <template slot="dot">
              <div class="time-table__dot" @click="openTimetable">
                <YxpIcon
                  :style="{ 'font-size': '30px' }"
                  type="iconzu2170"
                ></YxpIcon>
              </div>
            </template>
            <div v-if="livingCurr" class="course__living">
              <div>
                <div class="live-timeline-title">
                  {{ livingCurr.date | date2MonthDay }}
                  {{ livingCurr.s_time }} ~
                  {{ livingCurr.e_time }}
                </div>
                <div class="course-info-wrap">
                  <div class="course-living-info">
                    <span class="course-title__label">课程内容</span>
                    <a-tooltip
                      overlayClassName="yxp-tooltip"
                      placement="bottomLeft"
                      :title="livingCurr.course_type"
                    >
                      <span
                        :class="{
                          'student-title-width': +userInfo.is_assist === 0,
                          'assist-title-width': +userInfo.is_assist === 1
                        }"
                        class="course-title text-ellipsis"
                        >{{ livingCurr.course_type }}</span
                      >
                    </a-tooltip>
                  </div>
                  <div
                    v-if="+userInfo.is_assist === 1"
                    class="live-center-wrap"
                  >
                    <span class="course-type">
                      一对一
                    </span>
                    <div class="live-student" v-if="+userInfo.is_assist === 1">
                      学生：{{ livingCurr.student }}
                    </div>
                  </div>
                </div>
              </div>
              <a-button
                type="primary"
                class="live-btn"
                shape="round"
                @click="enterRoom(livingCurr)"
                >进入课堂</a-button
              >
            </div>
          </a-timeline-item>
          <a-timeline-item
            v-for="item in calendarData"
            :data-aaa="item.date"
            :key="item.date"
          >
            <template slot="dot">
              <span class="timeline-item__dot"></span>
            </template>
            <div class="course__ready">
              <span class="timeline-time">{{ item.date | date2MonthDay }}</span>
              <div class="day-items-wrap">
                <div
                  class="course__ready-item"
                  v-for="course in item.course"
                  :key="course.id"
                >
                  <div class="courselist-info-wrap">
                    <span class="course-time">{{
                      `${course.s_time}~${course.e_time}`
                    }}</span>
                    <div class="course-info">
                      <span>课程内容</span>
                      <a-tooltip
                        overlayClassName="yxp-tooltip"
                        placement="bottomLeft"
                        :title="course.course_type"
                      >
                        <span
                          :class="{
                            'student-title-width': +userInfo.is_assist === 0,
                            'assist-title-width': +userInfo.is_assist === 1
                          }"
                          class="text-ellipsis"
                          >{{ course.course_type }}</span
                        >
                      </a-tooltip>
                      <div class="course-classinfo-wrap">
                        <span
                          v-if="+userInfo.is_assist === 1"
                          class="course-classesinfo"
                        >
                          {{ course.classesinfo }}
                        </span>
                        <div
                          class="student-wrap"
                          v-if="+userInfo.is_assist === 1"
                        >
                          <template v-if="course.student"
                            >学生：{{ course.student }}</template
                          >
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="enter-btn">
                    <courseInterval
                      :data="course"
                      @enterRoom="enterRoom"
                      @updateLive="updateLive"
                    />
                  </div>
                </div>
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
        <section v-if="courseNum === 1" class="empty1-section">
          <img src="~assets/course/empty-table.png" alt="" />
        </section>
      </div>
      <TimetableModal
        @enterRoom="enterRoom"
        :markDateMore="calendarTable"
        @fetchData="fetchCalendar"
        :visible.sync="modalVisible"
      >
      </TimetableModal>
    </div>
    <section v-if="courseNum === 0" class="empty0-section">
      <img src="~assets/course/empty.png" alt="" />
      <span class="empty-message">暂无课程~</span>
    </section>
    <div class="mycourse-footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { fetchTimetable, fetchCalendar,checkUserStatus } from "@/services";
import { Timeline, Tooltip } from "ant-design-vue";
import TimetableModal from "./timetableModal";
import courseInterval from "./courseInterval";
import Footer from "@/components/layout/Footer";

import { formatData2Calendar } from "./utils";
import { mapState } from "vuex";
import { enterStatus } from "@/utils/format-tools";
import { enterRoom ,enterdoubleRoom} from "@/utils/tools";
const qs = require("querystring");

export default {
  name: "myCourse",
  components: {
    ATimeline: Timeline,
    ATimelineItem: Timeline.Item,
    ATooltip: Tooltip,
    TimetableModal,
    courseInterval,
    Footer
  },
  data() {
    return {
      padUrl: process.env.VUE_APP_PADURL,
      modalVisible: false,
      todayCourse: [],
      calendarData: [],
      calendarTable: [],
      livingCurr: "",
      courseNum: 0,
      originData: {}
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  watch: {},
  methods: {
    openTimetable() {
      this.modalVisible = true;
    },
    enterRoom(data) {
      enterRoom(data, this);
    },
    updateLive(data) {
      data = data || this.originData;
      for (let key in data) {
        if (Array.isArray(data[key])) {
          for (let i = 0; i < data[key].length; i++) {
            const { timecountdown, s_time, e_time } = data[key][i];
            const { pre_in_class, after_in_class } = data[key][i].config;
            this.courseNum += 1;
            if (
              enterStatus({
                timecountdown,
                s_time,
                e_time,
                pre_in_class,
                after_in_class
                }) === 0
            ) {
              this.livingCurr = data[key][i];
            }
          }
        }
      }
    },
    fetchCalendar (date) {
      fetchCalendar({
        type: "" + this.userInfo.is_assist,
        date: date || ''
      }).then(res => {
        if (res.code === 1) {
          let data = res.data;
          this.calendarTable = formatData2Calendar(data);
        }
      });
    }
  },
  created() {},
  mounted() {
    checkUserStatus({ }).then(check_res => {
      if(check_res.code == 1){
        if(check_res.data.study_tag == 0){
          fetchTimetable({
            type: "" + this.userInfo.is_assist
          }).then(res => {
            if (res.code === 1) {
              this.originData = res.data;
              this.calendarData = formatData2Calendar(res.data);
              this.updateLive(res.data)
            }
          });
          this.fetchCalendar()
        }else{
          enterdoubleRoom();
        }
      }
    })
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {}
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import url("./index.less");
</style>
